<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=0.5, maximum-scale=10.0,user-scalable=yes">
    <link rel="stylesheet" type="text/css" href="style3.css">
    <title>LZU CATS</title>
</head>
<!--
 1.最顶端主页图片模块，图片轮播，小标设置为圆形，小标背景为对应图片主题的猫咪
在播放到相应图片时，圆形小标实现放大和边框变黄色
同样设有左右箭头用以前后切换图片
javascript+css实现

2.猫咪展示框，在鼠标移到对应展示框上方时，展示框左移，由原来的展示50%到完全展示。
javascript实现 
-->
<body>
    <div id="header"> 
        <div id="logo"><img src="images/logo.jpg" width="124" height="82" alt=""/></div>
        <ul class="menu">
          <li><a class="mylink">关于领养</a></li>
          <li><a class="mylink">联系我们</a></li>
          <li><a class="mylink">猫咪日常</a></li>
          <li class="li2"><a class="mylink">简|繁|EN</a></li>
        </ul>
      </div>

    <div id="midpic">
        <div class="middlemask"></div>
        <div class="mpre"></div>  <!--左箭头-->
        <div class="mnext"></div>  <!--右箭头-->
        <div id="middlefig">  <!--中间轮播的图片-->
          <ul>
           <li><img src="images/midle1.jpg"/></li>
           <li><img src="images/midle2.jpg"/></li>
           <li><img src="images/midle3.jpg"/></li>
           <li><img src="images/midle4.jpg"/></li>
           <li><img src="images/midle5.jpg"/></li>
          </ul> 
         </div>
         <div id="middlesw">  <!--主页图片对应的小标-->
          <span tabindex="0" role="button"><img src="images/li1.jpg" width="105px" height="105px" alt=""/></span>
          <span tabindex="0" role="button"><img src="images/li2.jpg" width="100.67px" height="100.67px" alt=""/></span>
          <span tabindex="0" role="button"><img src="images/li3.jpg" width="100.67px" height="100.67px" alt=""/></span>
          <span tabindex="0" role="button"><img src="images/li4.jpg" width="100.67px" height="100.67px" alt=""/></span>
          <span tabindex="0" role="button"><img src="images/li5.jpg" width="100.67px" height="100.67px" alt=""/></span>
         </div>
        <div class="middletitle">  <!--中间的标题-->
          <div class="middle_t1">猫咪领养活动</div>
          <div class="middle_t2">给猫咪一个温暖的家</div>
        </div>
        <script>   /*中间图片轮播，按大图标手动变换并且停播*/
          var mk=document.getElementById("middlefig");
          var ms=document.getElementById("middlesw");
          var mlik=mk.getElementsByTagName("li");
          var mspa=ms.getElementsByTagName("span");
          function mchange(x,y){  /*从mlik[x]的图片切换到mlik[y]的图片,小图标对应变化*/
             mlik[x].style.opacity=0;
             mlik[y].style.opacity=1;
             mspa[x].style.borderColor="#fff";
             mspa[x].style.scale=1;    //对应图标恢复原来大小
             mspa[y].style.borderColor="rgb(36, 80, 107)";
             mspa[y].style.scale=1.3;    //对应图标放大
          }
          mchange(4,0); /*初始化*/
          var mn=0;  /*初始化*/
          function mlunbo(){
             mn++;
             if(mn==mlik.length) {mchange(4,0); mn=0;}
             else mchange(mn-1,mn);
          }
          var mtimer=setInterval(mlunbo,4000);   /*自动轮播，2s一换*/
          //for(var i=0;i<=4;i++){  //用for循环不能实现，只能单个单个输入（不知道为什么）
            mspa[0].onclick=function(){mchange(mn,0); mn=0;clearInterval(mtimer);}  //实现通过点击小图标使得轮播图片转到相应图片
            mspa[1].onclick=function(){mchange(mn,1); mn=1;clearInterval(mtimer);}
            mspa[2].onclick=function(){mchange(mn,2); mn=2;clearInterval(mtimer);}
            mspa[3].onclick=function(){mchange(mn,3); mn=3;clearInterval(mtimer);}
            mspa[4].onclick=function(){mchange(mn,4); mn=4;clearInterval(mtimer);}
            var mpre=document.getElementsByClassName("mpre")[0];
            var mnext=document.getElementsByClassName("mnext")[0];
            mpre.onclick=function(){
              if(mn!=0){mchange(mn,mn-1);mn--;}
              else {mchange(0,4); mn=4;}
            }
            mnext.onclick=function(){
              if(mn!=4){mchange(mn,mn+1);mn++;}
              else {mchange(4,0); mn=0;}
            }
        </script>
      </div>

    <div class="middle">

     <div class="infoout" style="background:rgb(36,80,107);">
      <div class="text">橙子</div>
      <div class="infoin" style="background:#fff; color:rgb(36,80,107);">
        <div class="divbox" style="background:rgb(36,80,107);">
           <div class="picture"><img src="images/cat1.jpg" height="100%" width="100%" /></div>
           <div class="catinfo">
                <br>
                &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp昵称：橙子<br>
                &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp外貌特点：橘得浅一点，大长腿 <br>
                &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp性格特点：不太怕人<br>
                &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp健康状况：无疾病，未绝育<br>
           </div>
        </div>
      </div>
     </div>

     <div class="infoout" style="background:rgb(0,0,0);">
      <div class="text">拽王</div>
      <div class="infoin" style="background:rgb(36,80,107); color:#fff;">
       <div class="divbox" style="background:#000;">
        <div class="picture"><img src="images/cat2.jpg" height="100%" width="100%" /></div>
        <div class="catinfo">
            <br>
            &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp昵称：拽王<br>
            &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp外貌特点：狸花,长相很霸气 <br>
            &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp性格特点：比较怕人,不好靠近<br>
            &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp健康状况：无疾病，已绝育<br>
       </div>
        </div>
      </div>
      </div>

      <div class="infoout" style="background:rgb(36,80,107);">
        <div class="text">甲骨</div>
        <div class="infoin" style="background:#fff; color:rgb(36,80,107);">
          <div class="divbox" style="background:rgb(36,80,107);">
            <div class="picture"><img src="images/cat3.jpg" height="100%" width="100%" /></div>
             <div class="catinfo">
                <br>
                &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp昵称：甲骨<br>
                &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp外貌特点：背上像甲骨图案 <br>
                &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp性格特点：亲人,爱吃,温和,欺软怕硬<br>
                &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp健康状况：无疾病，已绝育<br>
           </div>
          </div>
        </div>
      </div>

     <div class="infoout" style="background:#000;">
      <div class="text">白手套</div>
      <div class="infoin" style="background:rgb(36,80,107); color:#fff;">
        <div class="divbox" style="background:#000;">
            <div class="picture"><img src="images/cat4.jpg" height="100%" width="100%" /></div>
            <div class="catinfo">
                <br>
                &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp昵称：白手套<br>
                &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp外貌特点：脖子胸口大都为白色<br>
                &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp性格特点：不怕人,可以靠近<br>
                &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp健康状况：无疾病，已绝育<br>
           </div>
        </div>
      </div>
      </div>

      <div class="infoout" style="background:rgb(36,80,107);">
        <div class="text" style="left:6% !important;">飞跃猫猫</div>
        <div class="infoin" style="background:#fff; color:rgb(36,80,107);">
          <div class="divbox" style="background:rgb(36,80,107);">
            <div class="picture"><img src="images/cat5.jpg" height="100%" width="100%" /></div>
            <div class="catinfo">
                <br>
                &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp昵称：飞跃猫猫二号<br>
                &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp外貌特点：短毛,眼神较凶<br>
                &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp性格特点：有点贪吃,怕人,胆子大<br>
                &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp健康状况：无疾病，未绝育<br>
           </div>s
          </div>
        </div>
      </div>


    </div>

    <script src="anime/anime.min.js"></script>
    <script>
        var foin=document.getElementsByClassName("infoin");
        var n=0;
        for(n=0;n<=4;n++){ (function(n){  
            foin[n].onmouseover=function(){
            foin[n].style.marginLeft=0+'px';
            }
            foin[n].onmouseout=function(){
            foin[n].style.marginLeft=826+'px';
            }
        })(n)}
    </script>

    <div class="footer">    <!--底部-->
    <div class="footlogo"><img src="images/logo.jpg" width="124px" height="82px" alt=""/></div>
    <div class="foottext">
        <div style="height:63px; width:100%; margin-bottom: 9px;">
        <img src="images/LZUlogo.svg" width="200" height="60" alt="兰州大学">
        </div>
        <div class="foottext2">加入我们 &nbsp;｜ &nbsp; 联系我们</div>
        甘肃省兰州市天水南路222号 &nbsp;|&nbsp; 邮编: 730000<br>
        兰大猫咪 ZLU CATS.COM ALL RIGHTS RESERVED 
    </div>
    </div>
</body>
</html> 